<template>
  <div id="MyStrack">
    <x-header :left-options="{showBack: false}" title="我的足迹" class="header vux-1px-b">
      <a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
      <a slot="right" @click="visitClear()">清空</a>
    </x-header>

    <div class="content-wrap">
      <div v-if="visitList.length === 0 ">
        <div class="no-data">
          <img src="../../assets/images/home/nodata.png"/>
        </div>
      </div>
      <div class="list-wrap" v-else>
        <ul>
          <li v-for="(item,index) in visitList">
            <router-link :to="'/Detail/id/' + item.auction_id">
              <img v-if="item.goods_thumb.indexOf('/uploads') == 0" class="photo" :src="'/los' + item.goods_thumb"
                   alt=""/>
              <img v-else class="photo" :src="item.goods_thumb" alt=""/>
              <div class="info">
                <p class="desc">{{item.goods_name}}</p>
                <p v-if="item.auction_bidprice > 0" class="price">当前价:<span>￥{{item.auction_bidprice}}</span></p>
                <p v-else class="price">起拍价:<span>￥{{item.auction_startprice}}</span></p>
                <span class="visit_time">{{timer2time(item.visit_time)}}</span>
              </div>
            </router-link>
            <img class="font" @click="visitDel(item.visit_id,index)" src="../../assets/images/home/icon_delete.png"
                 alt=""/>
          </li>
        </ul>
      </div>
    </div>
    <loading :show="show1" :text="text"></loading>
    <toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
  </div>
</template>

<script>
import $ from 'jquery'
import { XHeader, Toast, Loading } from 'vux'
import axios from 'axios'
import BScroll from 'better-scroll';

export default {
  data() {
    return {
      visitList: [],
      cache: true,
      over: false,
      flag: true,
      show1: false,
      success: false,
      msg: '',
      visitTime: ''
    }
  },
  components: {
    XHeader,
    Toast,
    BScroll,
    Loading
  },
  created() {
    console.log(this.visitList);
  },
  activated() {
    this.getAuctionVisitList();
  },
  mounted() {
    //将时间戳转换成日期的封装函数
    Date.prototype.Format = function (fmt) {
      var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds()
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    }
  },
  methods: {
    getAuctionVisitList: function () {
      let _this = this;
      let more = true;
      var page = 1;
      this.$http({
        method: 'GET',
        url: '/los/api/member/auction_visit_list.json',
        data: ''
      }).then((result) => {
        this.visitList = result.data.visit_list;
        this.cache = false;
        this.$nextTick(() => {
          this.cache = true
        })
      }).catch((err) => {
        console.log(err);
      })
      $(window).scroll(function () {
        var htmlHeight = $(document).height();
        var clientHeight = $(window).height();
        var scrollTop = $(document).scrollTop();
        var overHeight = scrollTop + clientHeight;
        if (overHeight >= htmlHeight * 0.9) {
          if (more == true) {
            more = false;
            page += 1;
            axios.get('/los/api/member/auction_visit_list.json?page=' + page).then(function (result) {
              $.each(result.data.visit_list, function (index, val) {
                _this.visitList.push(val);
              });
              more = true;
              if (result.data.visit_list == '') {
                more = false;
              }
            }).catch(function (error) {
            });
          }
        }
      })
    },
    //删除单个记录
    visitDel: function (visit_id, index) {
      this.show1 = false;
      var index = index;
      var params = {
        visit_id: visit_id
      }
      axios.post('/los/api/member/auction_visit_del.json', params).then((result) => {
        console.log(result);
        if (result.data.code == 1) {
          this.success = !this.success;
          this.msg = result.data.msg;
          this.visitList.splice(index, 1);
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    //清空所有记录
    visitClear: function () {
      var params = {
        visit_id: 0
      }
      axios.post('/los/api/member/auction_visit_clear.json', params).then((result) => {
        console.log(result);
        if (result.data.code == 1) {
          this.success = !this.success;
          this.msg = result.data.msg;
          this.visitList = [];
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    //将时间戳转换成日期
    timer2time: function (time) {
      return new Date(parseInt(time) * 1000).Format("yyyy-MM-dd hh:mm:ss");
    },
    back: function () {
      window.history.go(-1);
    }
  }
}
</script>

<style scoped>
  .header {
    position: relative;
    background: #fff;
  }

  .no-data {
    width: 2.96rem;
    height: 2.96rem;
    margin: 3rem auto 0;
  }

  .no-data img {
    width: 100%;
  }

  .vux-header .vux-header-right a {
    color: #777;
    font-size: 0.37rem !important;
  }

  .content-wrap {
    width: 100%;
    padding: 0 0.26rem;
    background: #fff;
  }

  .content-wrap .title-bar {
    width: 100%;
    height: 1.17rem;
    line-height: 1.17rem;
  }

  .content-wrap .title-bar p {
    line-height: 1.17rem;
    font-size: 0.4rem;
    color: 333;
  }

  .content-wrap .list-wrap {
    width: 100%;
    background: #fff;
    position: relative;
  }

  .content-wrap .list-wrap ul li {
    overflow: hidden;
    padding: 0.34rem 0;
    position: relative;
  }

  .content-wrap .list-wrap ul li .photo {
    width: 1.78rem;
    height: 1.78rem;
    float: left;
  }

  .content-wrap .list-wrap ul li .info {
    float: left;
    margin-left: 0.29rem;
    overflow: hidden;
  }

  .content-wrap .list-wrap ul li .info .desc {
    width: 5.92rem;
    overflow: hidden;
    font-size: 0.34rem;
    line-height: 0.56rem;
    text-overflow: ellipsis;
    height: 1.12rem;
  }

  .content-wrap .list-wrap ul li .info .price {
    margin-top: 0.2rem;
    font-size: 0.34rem;
    color: #aaa;
    float: left;
  }

  .content-wrap .list-wrap ul li .info .visit_time {
    float: right;
    margin-top: 0.24rem;
    font-size: 0.32rem;
    color: #aaa;
  }

  .content-wrap .list-wrap ul li .info .price span {
    font-size: 0.34rem;
    color: #da4240;
    margin-left: 0.18rem;
  }

  .content-wrap .list-wrap ul li .font {
    float: right;
    width: 0.4rem;
    height: 0.4rem;
    top: 45%;
    position: absolute;
    right: 0;
  }
</style>
